<%--
  Created by IntelliJ IDEA.
  User: CM
  Date: 17/5/8
  Time: 下午9:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>CM创合管理平台</title>

    <jsp:include page="../../common/header.jsp"></jsp:include>
    <jsp:include page="../../common/cloud-head.jsp"></jsp:include>

    <link href="${ctx}/resources/style/login/style.css" rel="stylesheet">
    <link href="${ctx}/resources/style/jquery-ui-1.11.2.css" rel="stylesheet prefetch">
    <style>
        html,body{
            font-size: 125%;
        }
        .tab-box {
            line-height: 2rem;
            border-bottom: 1px solid #F34B91;
            margin: 0.5rem 0;
            padding: 0 !important;
            word-spacing: 0 !important;
            width: 90%;

        }

        .tab-item {
            display: inline-block;
            line-height: 2.8rem;
            padding: 0.4rem 0.8rem;
            border-bottom: none;
            vertical-align: bottom;
            margin: 0 !important;
            background-position: 100% 0;
            transition: all ease .8s;
            cursor: pointer;
        }

        .tab-item.active {
            background: #F34B91;
            color: #fff;
        }

        #pass {
            display: none;
        }

        .vcrd-box {
            display: block;
            text-align: right;
            margin-bottom: .5rem;
        }

        .vcrd-box input:first-child {
            text-align: left;
        }
        .page-container{
            min-width: 1366px;
            max-width: 1366px;
            height: 100%;
            display: block;
            position: relative;
            margin: 0 auto;
        }
        .bacimg{
            height: 100%;
            width:100%;
        }
        .logo-wrap{
            margin-left: 20px;
        }
        .login-submit{
            background:#F34B91 !important;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="page-container">
    <img class="bacimg" src="${ctx}/resources/portal/img/banner/loginbc.jpg">
    <div class="login-card">
        <div class="logo-wrap">
            <img src="${ctx}/resources/portal/img/banner/logo.jpg" onclick="javascript:window.location.href='${ctx}/home'">
        </div>
        <div class="tab-box">
            <div class="tab-item active">商户登录</div>
            <div class="tab-item">管理员登录</div>
        </div>
        <form action="${ctx}/admin/login/check" method="post" onsubmit="return checkForm(this)">
            <input type="text" name="phone" id="phone" placeholder="手机号码" value="">
            <input type="password" name="pass" id="pass" onfocus="this.type='password'" placeholder="密码" value="">
            <div class="vcrd-box">
                <div style="margin: 0.4rem auto;text-align: left;">
                    <input type="text" name="validateCode" id="validateCode" placeholder="输入验证码"
                           style="width: 9rem;height: 30px;vertical-align: top;"/>
                    <img src="" id="codePreview" src="${ctx}/resources/img/loading.gif"
                         style="width:160px;height:30px;" onclick="reloadValidateCode()"/>
                </div>
                <input type="text" name="vrcd" placeholder="短信验证码"/>
                <input type="button" value="短信验证码" id="sendBtn" onclick="sendSms()" class="login login-submit"/>

            </div>
            <input type="submit" name="登录" class="login login-submit"/>
        </form>

        <div class="login-help">
            <a href="#">技术支持</a> • <a href="#">CM创合</a>
        </div>
    </div>

</div>
<script src="${ctx}/resources/script/jquery-ui-1.11.2.js"></script>
<script>
    $(function () {
        if (self.frameElement && self.frameElement.tagName == "IFRAME") {
            parent.location = window.location;
        }

        reloadValidateCode();

        $(".tab-item").unbind().bind("click", function () {
            if ($(this).hasClass("active")) {
                return;
            }
            var index=$(this).index();
            switch (index){
                case 0:
                    $("#pass").hide("slow","linear",function(){
                        $(".vcrd-box").show();
                    });
                    break;
                case 1:
                    $(".vcrd-box").hide("slow","linear",function(){
                        $("#pass").show();
                    });
                    break;
            }


            $(".tab-item").toggleClass("active");

        })
    })

    function sendSms() {
        if (CURRENT_VALIDATE.toLowerCase() != $("#validateCode").val().toLowerCase()) {
            alert("验证码错误，请重试!");
            return;
        }
        var phone = $("#phone").val();
        if (/^1[3|4|5|7|8][0-9]{9}$/.test(phone) == false) {
            alert("请输入合法的手机号码!");
            return;
        }
        var data = {
            phone: phone,
            action: "LOGIN_VERIFY"
        }

        asyncAjax({
            url: ctx + "/sms/send",
            data: data,
            success: function (res) {
                if (res["result"] == 0) {
                    alert("验证码已经发送，请注意查收！");
                    $("#sendBtn").val("60s后重新发送").removeAttr("onclick").removeClass("login-submit");
                    var count = 60;
                    var timeInterval = window.setInterval(function () {
                        $("#sendBtn").val(--count + "后重新发送");
                    }, 1000)
                    setTimeout(function () {
                        $("#sendBtn").val("短信验证码").attr("onclick", "sendSms()").addClass("login-submit");
                        window.clearInterval(timeInterval);
                    }, 60000)
                } else {
                    alert(res["msg"]);
                }
            }
        })
    }

    var CURRENT_VALIDATE = 0;
    function reloadValidateCode() {
        var data = {};
        $.ajax({
            url: ctx + "/sms/validate",
            type: "post",
            data: data,
            beforeSend:function(){

            },
            success: function (res) {
                //console.log("data:%o", res);
                if (res["result"] == 0) {
                    $("#codePreview").attr("src", ctx + "/resources/upload/validateCode/" + res["data"] + ".png");
                    CURRENT_VALIDATE = res["data"];
                } else {
                    alert(res["msg"]);
                }
            }
        })
    }

    function checkForm(e) {
        var tabIndex = $(".tab-item.active").index();
        if (isEmpty($("#phone").val())) {
            alert("请输入手机号!");
            return false;
        }
        if (tabIndex == 0) {
            if (isEmpty($("#validateCode").val())) {
                alert("请输入短信验证码!");
                return false;
            }
        } else if (tabIndex == 1) {
            if (isEmpty($("#pass").val())) {
                alert("请输入密码!");
                return false;
            }
        } else {
            return false;
        }
        return true;
    }
</script>
</body>
</html>
